<!--报警配置-->
<template>
  <div class="main">
    <div class="info-container">
      <div class="info-container_body">
        <el-form ref="refFrom" label-position="top" class="demo" v-loading="loading">
          <el-form-item label="站房名称">
            <el-select
              v-model="item.stationId"
              filterable
              remote
              reserve-keyword
              placeholder="站房名称"
              remote-show-suffix
              :remote-method="queryStationList"
              :loading="loading"
            >
              <el-option v-for="item in stations" :key="item.stationId" :label="item.name" :value="item.stationId" />
            </el-select>
          </el-form-item>
          <el-form-item label="报警名称">
            <el-select
              v-model="item.ruleId"
              filterable
              remote
              reserve-keyword
              placeholder="报警名称"
              remote-show-suffix
              :remote-method="queryAlarmRuleList"
              :loading="loading"
            >
              <el-option v-for="item in   rules" :key="item.ruleId" :label="item.ruleName" :value="item.ruleId" />
            </el-select>
          </el-form-item>
          <el-form-item label="报警通道">
            <el-checkbox-group v-model="channelss">
              <el-checkbox v-for="item   in   channels" :label="item.label" :value="item.value" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="用户组">
            <el-select
              v-model="userGroups"
              filterable
              multiple
              collapse-tags
              remote
              reserve-keyword
              placeholder="用户组"
              remote-show-suffix
              :remote-method="queryGroupList"
              :loading="loading"
              style="width: 240px"
            >
              <el-option v-for="item in   groups" :key="item.id" :label="item.groupName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="info-container_footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { list, confAdd, confUpdate } from '@/api/operation/alarmRule/index';
import { listGroup } from '@/api/system/group/index';
import { listStation } from '@/api/station/index';

import common from '@/utils/common.ts';

export default {
  props: {
    data: {}
  },
  computed: {
    timeRange: {
      get() {
        return this.item.timeRange / 3600;
      },
      set(value) {
        this.item.timeRange = value * 3600;
      }
    },
    channelss: {
      get() {
        if (this.item.channels) return this.item.channels.split(',');
        else return [];
      },
      set(value) {
        this.item.channels = '';
        value.forEach((v) => {
          if (v != '') this.item.channels += v + ',';
        });
      }
    },
    userGroups: {
      get() {
        if (this.item.userGroups) return this.item.userGroups.split(',');
        else return [];
      },
      set(value) {
        this.item.userGroups = '';
        value.forEach((v) => {
          if (v != '') this.item.userGroups += v + ',';
        });
      }
    }
  },
  data() {
    return {
      loading: false,
      enabled: [
        { label: '停用', value: '0' },
        { label: '启用', value: '1' }
      ],
      channels: [
        { label: '告警短信', value: 'SMS' },
        { label: '站内信息', value: 'WEBSOCKET' },
        { label: '钉钉群机器人通知', value: 'DINGTALK' },
        { label: '告警邮件', value: 'MAIL' }
      ],
      item: {},
      stations: [],
      groups: [],
      rules: []
    };
  },
  created() {
    this.init();
  },
  methods: {
    init(data) {
      this.queryGroupList('');
      this.queryStationList('');
      this.queryAlarmRuleList('');

      if (data == null) this.item = this.data;
      else this.item = data;
    },

    /**
     * 获取用户组列表
     * @param name
     */
    queryAlarmRuleList(name) {
      list({ ruleName: name }).then((res) => {
        if (res.code == 200) {
          this.rules = res.rows;
        }
      });
    },

    /**
     * 获取用户组列表
     * @param name
     */
    queryGroupList(name) {
      listGroup({ groupName: name }).then((res) => {
        if (res.code == 200) {
          this.groups = res.rows;
        }
      });
    },

    /**
     * 获取站房列表
     */
    queryStationList(name) {
      listStation({ name: name }).then((res) => {
        if (res.code == 200) {
          this.stations = res.rows;
        }
      });
    },

    handleCancel() {
      this.$emit('hideRight');
    },

    handleSave() {
      let data = this.item;
      if (data.configId == null) {
        //新增
        this.add();
      } else {
        //编辑
        this.update();
      }
    },

    add() {
      this.loading = true;
      confAdd(this.item)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.$emit('hideRight');
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    update() {
      this.loading = true;
      confUpdate(this.item)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.$emit('hideRight');
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  height: 100%;

  .contentFrm {
    padding: 10px;
    background: #f6f7fb;
  }

  .el-input-number__decrease,
  .el-input-number__increase {
    display: none;
  }

  .el-input-number {
    width: 100%;
  }
}
</style>